// webpack.config.js
const path = require("path");
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: 'production',
    entry:"./src/main.js",
    // devtool: 'source-map',
    output:{
        filename:'[hash].bundle.js',
        publicPath: "../",
        // chunkFilename:`[name].[hash].bundle.js`
    },
    optimization:{
        usedExports:true,
        minimize: true,
        // splitChunks:{
        //     chunks:'all'
        // }
    },
   
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        // historyApiFallback: true,
        port: 9000,
        hot: true,              // 开启模块热替换
        hotOnly: true           // 如果模块热替换功能不生效，则不刷新网页
    },  
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                  'style-loader',
                  'css-loader'
                ]
            },  
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
            } ,                      
            {
                test: /\.less$/,
                use:[
                    // MiniCssExtractPlugin.loader,
                    'style-loader',
                    "css-loader",
                    "less-loader"            
                ] 
            },
            { 
                test:/\.vue$/, loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'assets/'
                    }
                  }
                ]
            },
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: [
            //       {
            //         loader: 'url-loader',
            //         options: {
            //             outputPath: 'assets/',
            //             limit: 8192
            //         }
            //       }
            //     ]
            // }                                                 
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            title: 'My App',
            name:"dalaoge",
            filename: 'public/index.html',
            template:'public/index.html'            
        }), 
        // new CleanwebpackPlugin(),
        new CopyWebpackPlugin(
            { patterns: [{ 
                from:path.join(__dirname,'public'),
            to:'public'}] } // 需要拷贝的目录或者路径通配符
        ),             
        new webpack.DefinePlugin({
            BASE_URL:JSON.stringify(path.join(__dirname, "dist/public/"))
          }),           
    ]    
}
